<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-背景缩放</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      border: 1px solid red;
      background: url(images/lbx.png) no-repeat center center;

      /* 1. 设置大小: 宽 高 */
      background-size: 500px 500px;
      /* 2. 如果只写一个参数 肯定为宽度 另外一个会等比例缩放 */
      background-size: 500px;
      /* 3. 如果单位为百分比% 相对于父盒子宽度或高度来说的 */
      background-size: 50%;

      /* 4. cover: 要完全覆盖父级盒子 可能会存在部分背景图片显示不全的情况 */
      background-size: cover;

      /* 5. contain: 高度与宽度等比例拉伸 当宽度或者高度铺满盒子时不再拉伸 可能会有空白区域 */
      background-size: contain;
    }

    div:nth-child(2) {
      width: 50px;
      height: 50px;
      border: 1px solid red;
      background: url(images/100_100.png) no-repeat;
      /* 设置背景 */
      background-size: 50px 50px;
    }
  </style>
</head>

<body>

  <div></div>
  <div></div>

</body>

</html>